<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3 v-color = "'orange'">我是一个全局自定义指令</h3>
        <p v-fontsize = "50">我是一个私有自定义指令</p>
    </div>
    <script>
        //定义一个全局的自定义指令
        Vue.directive('color', {
            //一般有三个常用的函数,每个函数第一个形参常用el,
            //el代表表示绑定指令的那个元素,相当于封装了获取DOM对象
            //第二个形参binding : 代表一个对象
            //name : v- 后面自定义的指令名称
            //value : 绑定的值
            //express : 绑定的表达式
            bind : function(el,binding){ //和样式相关的操作,一般都可以在bind中执行
                el.style.color = binding.value

            },
            inserted : function(el){ //inserted 表示元素 插入DOM中的时候,会执行一次
                //最常见案例 表单元素获取焦点
                // el.focus()
            },
            updated : function(el) {
                
            }
                

        }),



        new Vue({
            el : "#app",
            data : {

            },
            methods : {

            },
            //自定义私有指令
            directives : {
                'fontsize' : function(el,binding){ // 注意: 这个function等同于把代码写入了 bind 和 update中
                    el.style.fontSize = parseInt(binding.value) + 'px'
                }
            }

        })
    
    
    </script>
</body>
</html>